<template>
  <a-locale-provider :locale="zh_CN">
    <div id="app">
      <a-layout>
        <a-layout-content :style="{ margin: '10px', padding: '24px', background: '#fff'}">
          <a-card title="查询条件" size="small">
            <template v-for="(tt,index) in tagTypes">
              <a-checkbox-group v-bind:key="tt.id">
                {{tt.name}}:&nbsp;&nbsp;
                <template v-for="t in getTags(tt.id)">
                  <a-checkbox :key="tt.id+'_'+ t.id">{{t.name}}</a-checkbox>
                </template>
              </a-checkbox-group>
              <a-divider v-if="index%2==0" :key="'divider_'+tt.id"></a-divider>
            </template>
          </a-card>
          <br />
          <a-table :columns="columns" :dataSource="accounts">
            <a slot="name" slot-scope="text,record" href="javascript:;">{{record.id}}{{text}}</a>
            <span slot="customTitle">
              <a-icon type="smile-o" />&nbsp; 编号
            </span>
          </a-table>
        </a-layout-content>
      </a-layout>
    </div>
  </a-locale-provider>
</template>

<script>
import vue from "vue";
import axios from "axios";
import VueAxios from "vue-axios";
import zh_CN from "ant-design-vue/lib/locale-provider/zh_CN";
import { Layout, Card, Divider, Checkbox, Table, Icon } from "ant-design-vue";

vue.component(Layout.name, Layout);
vue.component(Layout.Content.name, Layout.Content);
vue.component(Card.name, Card);
vue.component(Divider.name, Divider);
vue.component(Checkbox.name, Checkbox);
vue.component(Checkbox.Group.name, Checkbox.Group);
vue.component(Table.name, Table);
vue.component(Icon.name, Icon);
vue.use(VueAxios, axios);

const columns = [
  {
    dataIndex: "loginName",
    key: "id",
    width: 100,
    slots: { title: "customTitle" },
    scopedSlots: { customRender: "name" }
  },
  {
    width: 150,
    title: "服务器",
    dataIndex: "serveName",
    key: "serveName"
  },
  {
    title: "资源详情",
    dataIndex: "desc",
    key: "desc"
  }
];

const data = [
  {
    key: "1",
    name: "ZXQ333",
    sname: "发电机计划",
    age:
      "45级65万金币6万油6920钻1161魔方555金箱--船坞190蓝图511舰炮3防空炮2舰载机3设备2--金船:+金布里+圣地亚哥+蒙彼利埃+明尼阿波利斯+巴尔的摩+华盛顿+马萨诸塞+企业+埃塞克斯+贝尔法斯特+天狼星+确捷+胡德+厌战+威尔士亲王+约克公爵+光辉+胜利+茳+貅+獒+鲨+鲐+鲪+鸗+鹬+凰兵装兵装+伊19+伊168+Z46+欧根亲王+提尔比茨+齐柏林伯爵+U81+U47+U101+扎拉+恶毒+加斯科涅兵装兵装+圣黑之心+群白之心+露露缇耶+绊爱E+湊阿库娅--紫船69:海伦娜+女灶神+"
  },
  {
    key: "2",
    name: "ZXQ444",
    sname: "发电机计划",
    age:
      "45级65万金币6万油6920钻1161魔方555金箱--船坞190蓝图511舰炮3防空炮2舰载机3设备2--金船:+金布里+圣地亚哥+蒙彼利埃+明尼阿波利斯+巴尔的摩+华盛顿+马萨诸塞+企业+埃塞克斯+贝尔法斯特+天狼星+确捷+胡德+厌战+威尔士亲王+约克公爵+光辉+胜利+茳+貅+獒+鲨+鲐+鲪+鸗+鹬+凰兵装兵装+伊19+伊168+Z46+欧根亲王+提尔比茨+齐柏林伯爵+U81+U47+U101+扎拉+恶毒+加斯科涅兵装兵装+圣黑之心+群白之心+露露缇耶+绊爱E+湊阿库娅--紫船69:海伦娜+女灶神+"
  },
  {
    key: "3",
    name: "ZXQ555",
    sname: "发电机计划",
    age:
      "45级65万金币6万油6920钻1161魔方555金箱--船坞190蓝图511舰炮3防空炮2舰载机3设备2--金船:+金布里+圣地亚哥+蒙彼利埃+明尼阿波利斯+巴尔的摩+华盛顿+马萨诸塞+企业+埃塞克斯+贝尔法斯特+天狼星+确捷+胡德+厌战+威尔士亲王+约克公爵+光辉+胜利+茳+貅+獒+鲨+鲐+鲪+鸗+鹬+凰兵装兵装+伊19+伊168+Z46+欧根亲王+提尔比茨+齐柏林伯爵+U81+U47+U101+扎拉+恶毒+加斯科涅兵装兵装+圣黑之心+群白之心+露露缇耶+绊爱E+湊阿库娅--紫船69:海伦娜+女灶神+"
  },
  {
    key: "4",
    name: "ZXQ666",
    sname: "发电机计划",
    age:
      "45级65万金币6万油6920钻1161魔方555金箱--船坞190蓝图511舰炮3防空炮2舰载机3设备2--金船:+金布里+圣地亚哥+蒙彼利埃+明尼阿波利斯+巴尔的摩+华盛顿+马萨诸塞+企业+埃塞克斯+贝尔法斯特+天狼星+确捷+胡德+厌战+威尔士亲王+约克公爵+光辉+胜利+茳+貅+獒+鲨+鲐+鲪+鸗+鹬+凰兵装兵装+伊19+伊168+Z46+欧根亲王+提尔比茨+齐柏林伯爵+U81+U47+U101+扎拉+恶毒+加斯科涅兵装兵装+圣黑之心+群白之心+露露缇耶+绊爱E+湊阿库娅--紫船69:海伦娜+女灶神+"
  },
  {
    key: "5",
    name: "ZXQ777",
    sname: "曼哈顿",
    age:
      "45级65万金币6万油6920钻1161魔方555金箱--船坞190蓝图511舰炮3防空炮2舰载机3设备2--金船:+金布里+圣地亚哥+蒙彼利埃+明尼阿波利斯+巴尔的摩+华盛顿+马萨诸塞+企业+埃塞克斯+贝尔法斯特+天狼星+确捷+胡德+厌战+威尔士亲王+约克公爵+光辉+胜利+茳+貅+獒+鲨+鲐+鲪+鸗+鹬+凰兵装兵装+伊19+伊168+Z46+欧根亲王+提尔比茨+齐柏林伯爵+U81+U47+U101+扎拉+恶毒+加斯科涅兵装兵装+圣黑之心+群白之心+露露缇耶+绊爱E+湊阿库娅--紫船69:海伦娜+女灶神+"
  }
];

export default {
  name: "app",
  data() {
    return {
      zh_CN,
      data,
      columns,
      tags: [],
      tagTypes: [],
      accounts:[]
    };
  },
  components: {},
  mounted() {
    this.getProduct();
    this.getAccounts();
  },
  methods: {
    getTags(tagTypeId) {
      return this.tags.filter(item => {
        return item.tagTypeId == tagTypeId;
      });
    },
    getProduct() {
      this.axios
        .get("https://localhost:44340/api/Products/GetProduct")
        .then(res => {
          // eslint-disable-next-line no-console
          console.log(res);
          this.tagTypes = res.data.tagTypes;
          this.tags = res.data.tags;
        });
    },
    getAccounts(){
      this.axios.get("https://localhost:44340/api/Products/GetAccounts",{
        params:{
          tags:[1,2,3,4,5,6,7]
        }

      }).then(res=>{
        this.accounts=res.data;
        // eslint-disable-next-line no-console
        console.log(res)
      })
    }
  }
};
</script>
